import React, { Component } from 'react'

export default class About extends Component {
    state = {
        list: [
            {
                id: 0,
                title: "标题1"
            },
            {
                id: 1,
                title: "标题2"
            }
        ]
    }
    pushDetail = (id) => {
        // 1. url可见
        // this.props.history.push("/detail?id=100&title=abc")
        // 2. url不可见 (不会保存，刷新会丢失)
        // this.props.history.push({
        //     // 路由地址
        //     pathname: "/detail",
        //     // def: {
        //     //     id
        //     // }
        // })
        // 3. url不可见 (会保存, 永久存储)
        // this.props.history.push({
        //     pathname: "/detail",
        //     state: {
        //         id
        //     }
        // })
        // 4. url可见
        // this.props.history.push("/detail/" + id)
    }
    render() {
        const { list } = this.state
        console.log(this.props)
        return (
            <div>
                {
                    list.map(item => {
                        return <li onClick={() => {
                            this.pushDetail(item.id)
                        }} key = { item.id }>
                            { item.title }
                        </li>
                    })
                }
            </div>
        )
    }
}
